<!--
 * @Author: liutongchao 1923236391@qq.com
 * @Date: 2023-06-25 15:01:09
 * @LastEditors: liutongchao 1923236391@qq.com
 * @LastEditTime: 2023-06-25 16:14:05
 * @FilePath: \greenbeeadmin\views\common\upload.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GreenBeeAdmin 后台管理系统</title>
    <meta name="keywords" content="layuimini,layui,layui模板,layui后台,后台模板,admin,admin模板,layui mini">
    <meta name="description" content="layuimini基于layui的轻量级前端后台管理框架，最简洁、易用的后台框架模板，面向所有层次的前后端程序,只需提供一个接口就直接初始化整个框架，无需复杂操作。">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/static/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/layuimini.css?v=2.0.1" media="all">
    <link rel="stylesheet" href="/static/css/themes/default.css" media="all">
	
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
   
</head>
<body>
<div>
	<div class="layuimini-content-page">
		<!--<link rel="stylesheet" href="/static/lib/layui-v2.5.5/css/layui.css" media="all">-->
		<link rel="stylesheet" href="/static/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
			
		<blockquote class="layui-elem-quote">
			上传组件使用开源项目：<a href="http://www.jq22.com/jquery-info14213" target="_blank">zyupload</a><br>
			
		</blockquote>
		<div id="zyupload" class="zyupload"></div>
		
		
		<script src="/static/lib/jquery-1.7.2/jquery-1.17.2.min.js" charset="utf-8"></script>
		<script src="/static/lib/jq-module/zyupload/zyupload-1.0.0.{{.js_prefix}}.js" charset="utf-8"></script>
		<script src="/static/lib/layer/layer.js"></script>
		<script type="text/javascript">
			$(function () {
				// 初始化插件
				$("#zyupload").zyUpload({
					width: "650px",                 // 宽度
					height: "420px",                 // 宽度
					itemWidth: "140px",                 // 文件项的宽度
					itemHeight: "115px",                 // 文件项的高度
					url: "/page/upload",  // 上传文件的路径
					fileType: ["jpg", "png", "txt", "js", "gif"],// 上传文件的类型
					fileSize: 512000000,                // 上传文件的大小
					multiple: true,                    // 是否可以多个文件上传
					dragDrop: true,                    // 是否可以拖动上传文件
					tailor: true,                    // 是否可以裁剪图片
					del: true,                    // 是否可以删除文件
					finishDel: false,  				  // 是否在上传文件完成后删除预览
					isfinished: false,				//是否完成
					/* 外部获得的回调接口 */
					onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
						console.info("当前选择了以下文件：");
						console.info(selectFiles);
					},
					onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
						console.info("当前删除了此文件：");
						console.info(file.name);
					},
					onSuccess: function (file, response) {          // 文件上传成功的回调方法
						console.info("此文件上传成功：");
						console.info(file.name);
						console.info("此文件上传到服务器地址：");
						console.info(response);
						//$("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
						var id_name = "{{.id_name}}";
						var types = "{{.types}}"
						var optinons = {id:id_name,type:types}
						var obj=$.parseJSON(response);
						if(obj.code == 200){
							var filepath = obj.data.filename
							//父页面的方法
							this.isfinished = true;
							console.log(parent.layui.CmfUpload.renderResponse(optinons,filepath));
							
						}else{
							this.isfinished = false;
							layer.msg(obj.msg)
							
						}
					},
					onFailure: function (file, response) {          // 文件上传失败的回调方法
						console.info("此文件上传失败：");
						console.info(file.name);
						layer.msg("文件上传失败")
					},
					onComplete: function (response) {           	  // 上传完成的回调方法
						console.info("文件上传完成");
						console.info(response);
						//上传完成提示，并关闭窗口
						if(this.isfinished){
							layer.msg("文件上传完成",{end:function(){
								//parent.layer.closeAll();
								parent.layer.close(parent.layer.getFrameIndex(window.name));  //关闭父级窗体
							}})
						}
						
					}
				});
				

			});
		</script>
		
	</div>
		
</div>  

<script src="/static/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=2.0.0" charset="utf-8"></script>

</body>
</html>